<template>
  <div class="app-container">
    <el-menu :default-active="activeIndex" class='addMenu' mode="horizontal"
             @select="handleSelect"
             style="margin-bottom: 10px;"
    >
      <el-menu-item index="1">白名单</el-menu-item>
      <el-menu-item index="2">检查记录</el-menu-item>
      <el-menu-item index="3">检查计划</el-menu-item>
    </el-menu>
    <div class="white-box">
    <el-row :gutter="24">
      <el-col>
        <h2 style="width:100%; text-align:center">综合查一次日程表</h2>
      </el-col>
      <el-col :span="18"  style="min-width: 900px; position: relative">
        <el-date-picker
          class="timeRange"
          v-model="value"
          clearable
          size="small"
          placeholder="选择日期时间"
          type="month"
          value-format="yyyy-MM"
          format="yyyy-MM"
          ref="datePicker"
          :clearable = "false"
        />
        <el-calendar v-model="value" v-loading="loading">
          <template slot="dateCell" slot-scope="{date, data}" >
            <span>
              {{ parseInt(data.day.split('-')[2], 10) }}
            </span>
            <span v-if="recordsNumbers[data.day]">
              <el-tag type="warning">{{ recordsNumbers[data.day].total }}个检查</el-tag>
              <div style="margin: 3px" class="formatFont">联合检查{{ recordsNumbers[data.day].joint }}个</div>
              <div style="margin: 3px" class="formatFont">单独检查{{ recordsNumbers[data.day].single }}个</div>
            </span>
          </template>
        </el-calendar>
      </el-col>
      <el-col :span="6">
        <div class="records" style="min-width: 250px;">
        <h3 style="margin-right: 32px;">{{ value| formatDate }}</h3>
        <div v-if="records.length != 0">
          <p class="formatFont">涉及企业{{ enterpriseSet.size }}家，涉及部门{{ departmentSet.size }}家</p>
          <div v-for="record, index in records" :key="record.id" class="record">
            <span class="tag-box">
              <el-tag type="info" > {{ index + 1}} </el-tag>
              <!-- <el-tag>{{ record.section }}</el-tag> -->
              <el-tag type="warning">{{ record.inspectType }}</el-tag>
              <span class="detail" @click="doView(record.id)">详情</span>
            </span>
            <p class="formatFont">被查企业：{{ record.enterpriseName }}</p>
            <!-- 1.部门1空，直接输出部门2； 2.部门2空，直接输出部门1；同时不为空，逗号分割 -->
            <p class="formatFont" v-if="record.inspectDept1 != null && record.inspectDept2 != null">检查部门：{{ record.inspectDept1 }}, {{ record.inspectDept2 }}</p>
            <p class="formatFont" v-else>检查部门：{{ record.inspectDept1 }}{{ record.inspectDept2 }}</p>
          </div>
        </div>
        <div v-else>
          <el-tag type="success" effect="dark">没有检查记录</el-tag>
        </div>
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>
<script>
import plan from "@/api/business/synthesis/plan";

export default {
  data() {
    return {
      value: new Date(),
      recordsNumbers : [],
      records:[],
      departmentSet: new Set(),
      enterpriseSet: new Set(),
      loading: false,
      activeIndex: '3'
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.loading = true
        if (newValue !== undefined){
          if (typeof newValue != 'string'){
            const month = newValue.getFullYear() + "-" + (newValue.getMonth()+1).toString().padStart(2, '0')
            this.getRecordsNumbers(month)
            const day = month + "-" + newValue.getDate().toString().padStart(2, '0')
            this.getRecords(day)
          }
          else{
            this.getRecordsNumbers(newValue)
            const day = newValue + "-01"
            this.getRecords(day)
          }
        }
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      switch (key) {
        case '1': 
          this.$router.push('/business/synthesis/whitelist')
          break;
        case '2': 
          this.$router.push('/business/synthesis/record')
          break;
        case '3': 
          this.$router.push('/business/synthesis/plan')
          break;
      }
    },
    removeHeader() {
      this.$el.querySelector('div.el-calendar__title').remove();
    },
    getRecordsNumbers(month){
      plan.getRecordsNumbers(month).then(res => {
        this.recordsNumbers = res.data
      })
    },
    getRecords(day){
      plan.getRecords(day).then(res => {
        this.records = res.data
        if (this.records.length != 0){
          this.countDepartments()
          this.countEnterprises()
        }
        this.loading = false
      })
    },
    doView(id) {
      this.$router.push({
        path: '/business/synthesis/record/detail/' + id,
        query: {
          last: '日历',
        }
      })
      // this.$router.push('/business/synthesis/record/detail/' + id)
    },
    countDepartments(){
      this.departmentSet = new Set()
      this.records.forEach(record => {
        // const departments = record.inspectDept.split('、');
        // departments.forEach(department => {
        //   this.departmentSet.add(department);
        // });
        if (record.inspectDept1 != null) {
          this.departmentSet.add(record.inspectDept1);
        }
        if (record.inspectDept2 != null) {
          this.departmentSet.add(record.inspectDept2);
        }
      });
    },
    countEnterprises(){
      this.enterpriseSet = new Set()
      this.records.forEach(record => {
        this.enterpriseSet.add(record.enterpriseName);
      });
    }
  },
  created() {
    const date = new Date();
    const month = date.getFullYear() + "-" + (date.getMonth()+1).toString().padStart(2, '0');
    this.getRecordsNumbers(month);
    const day = month + "-" + date.getDate().toString().padStart(2, '0');
    this.getRecords(day);
  }, 
  mounted() {
    this.removeHeader();
  },
  filters: {
    formatDate(value) {
      const date = new Date(value);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString();
      const day = date.getDate().toString();
      return `${year}年${month}月${day}日`;
    }
  },
}
</script>

<style>
.current.is-selected div {
  color: #006400;
}

.white-box {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #D4D4D4;
  margin: 20px;
  padding: 12px
}

.record{
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  margin: 20px 32px 20px 0;
  padding: 12px;
}

.tag-box .el-tag{
  margin: 5px
}

.detail{
  color: #909399;
  font-size: 12px;
  cursor: pointer;
}
/*.el-calendar__header {*/
/*  border: 1px solid red;*/
/*  position: relative;*/
/*}*/
/*.el-calendar__button-group {*/
/*  border: 1px solid blue;*/
/*}*/
.timeRange {
  position: absolute;
  left: 260px;
  top: 10px;
}

.formatFont{
  font-size:14px;
}
</style>
